<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
    </script>
</head>
<body>
<div id="app">

    <input type="text" v-model="phone" @focus="getFocus()" @blur="myBlur()"> <span :style="spanStyle">{{text}}</span>
    </span>
    <br>
</div>
<script>
    var vm = new Vue(
        {
            el: '#app',
            data: {
                phone: '',
                spanStyle: {
                    background: 'green',
                    color: 'lightgreen',
                },
                text: '手机号格式正确',
            },
            methods: {
                getFocus() {
                    this.text = "";
                    this.spanStyle.background = '';
                    this.spanStyle.color = '';
                },
                myBlur() {
                    //验证文本框中的内容
                    if (/^1[3-9]\d{9}$/.test(this.phone)) {
                        this.text = "手机号格式正确";
                        this.spanStyle.background = 'green';
                        this.spanStyle.color = 'lightGreen';
                    } else {
                        this.text = "手机号格式错误";
                        this.spanStyle.background = 'red';
                        this.spanStyle.color = 'lightGreen';
                    }
                },
            }
        }
    );
</script>
</body>
</html>